<template>
	<view class="loginbytelephone">

		<view class="login-touxiang">
			<image class="login-phonetouxiang" src="../../static/images/lrx/image_touxiang@3x.png" mode=""></image>
		</view>

		<view class="login-tele">
			199<text>****</text>8074
		</view>

		<view class="login-benjihaoma">
			本机号码一键登录
		</view>

		<navigator url="/pages/loginlrx/loginlrx">
			<view class="login-qthmdl">
				使用其他手机号登录
			</view>
		</navigator>


		<view class="login-xieyi">
			<view class="login-checkboxfather">

				<image v-if="checkedxieyi==false" @tap="checkedxieyi=true" class="login-checkbox"
					src="../../static/images/lrx/icon_xieyi1.png" mode=""></image>
				<image v-else @tap="checkedxieyi=false" class="login-checkboxselected"
					src="../../static/images/lrx/icon_xieyiselected.png"></image>

			</view>
			<view class="login-text">
				同<text class="bluetext">《移动账号服务与协议》</text>并授权<text class="bluetext">《赤兔用户协议》</text>和<text
					class="bluetext">《隐私协议》</text>
			</view>
		</view>

		<!-- 其他方式登录 -->

		<view class="otherLogin">
			<view class="otherLogin-text">
				—— 其他方式登录 ——
			</view>
			<view class="otherLogin-bottomimg">
				<image class="imgitem" src="../../static/images/lrx/button_loginwx@3x.png"></image>
				<image class="imgitem" src="../../static/images/lrx/button_loginqq@3x.png"></image>
				<image class="imgitem" src="../../static/images/lrx/button_loginapp@3x.png"></image>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkedxieyi: false
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.loginbytelephone {
		background-color: white;
		padding-bottom: 100rpx;

		// 头像
		.login-touxiang {
			text-align: center;
			margin: 0rpx auto;
			padding: 50rpx;

			.login-phonetouxiang {
				width: 150rpx;
				height: 150rpx;
			}
		}

		// 电话号码
		.login-tele {
			text-align: center;
			font-weight: 700;
			font-size: 40rpx;
			margin-bottom: 40rpx;
		}

		.login-benjihaoma {
			width: 600rpx;
			background-color: #f5610c;
			height: 80rpx;
			margin: 0 auto;
			border-radius: 100rpx;
			text-align: center;
			color: white;
			margin-top: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
		}

		.login-qthmdl {
			width: 600rpx;
			border: 1px solid gray;
			height: 80rpx;
			margin: 0 auto;
			border-radius: 100rpx;
			text-align: center;
			color: gray;
			line-height: 80rpx;
			font-size: 30rpx;
			margin-top: 40rpx;
			margin-bottom: 30rpx;
		}

		.login-xieyi {
			width: 600rpx;
			margin: 30rpx auto;
			display: flex;
			font-size: 28rpx;
			padding-bottom: 30rpx;
			justify-content: space-between;

			.login-checkboxfather {
				width: 60rpx;

				.login-checkbox {
					width: 40rpx;
					height: 40rpx;
				}

				.login-checkboxselected {
					margin-left: 4rpx;
					margin-top: 4rpx;
					width: 36rpx;
					height: 36rpx;
				}
			}

			.login-text {
				width: 550rpx;
			}

			.bluetext {
				color: #3e3ed5;
			}
		}

		// 其他登录方式
		.otherLogin {
			width: 600rpx;
			margin: 50rpx auto;
			margin-top: 200rpx;
			padding-bottom: 50rpx;

			.otherLogin-text {
				text-align: center;
				color: #d5d5d5;
				margin: 30rpx auto;
			}

			.otherLogin-bottomimg {
				display: flex;
				justify-content: space-around;

				.imgitem {
					width: 100rpx;
					height: 100rpx;
				}
			}
		}

	}
</style>
